import React from 'react';

interface ButtonProps {
  children: React.ReactNode;
  variant?: 'default' | 'outline' | 'ghost' | 'gradient';
  size?: 'default' | 'sm' | 'lg';
  fullWidth?: boolean;
  type?: 'button' | 'submit' | 'reset';
  onClick?: () => void;
  disabled?: boolean;
  className?: string;
}

const Button: React.FC<ButtonProps> = ({
  children,
  variant = 'default',
  size = 'default',
  fullWidth = false,
  type = 'button',
  onClick,
  disabled = false,
  className = ''
}) => {
  const baseStyles = 'inline-flex items-center justify-center font-medium rounded-lg transition-all duration-300 ease-in-out focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-[#00d4ff] dark:focus:ring-offset-gray-900 disabled:opacity-50 disabled:cursor-not-allowed active:scale-95';
  
  const variantStyles = {
    default: 'bg-gradient-to-r from-[#00d4ff] to-[#00a8cc] text-white hover:from-[#00a8cc] hover:to-[#00d4ff] shadow-md hover:shadow-lg hover:shadow-[#00d4ff]/30',
    outline: 'border-2 border-[#00d4ff] text-[#00d4ff] hover:bg-[#00d4ff] hover:text-white dark:text-[#00d4ff] dark:hover:bg-[#00d4ff] dark:hover:text-gray-900 shadow-sm hover:shadow-md',
    ghost: 'text-[#00d4ff] hover:bg-[#00d4ff]/10 hover:text-[#0f1c3f] dark:hover:text-white dark:hover:bg-[#00d4ff]/20',
    gradient: 'bg-gradient-to-r from-[#0f1c3f] via-[#00d4ff] to-[#0f1c3f] dark:from-gray-800 dark:via-[#00d4ff] dark:to-gray-800 bg-size-200 bg-pos-0 hover:bg-pos-100 text-white shadow-lg hover:shadow-xl hover:shadow-[#00d4ff]/40'
  };
  
  const sizeStyles = {
    sm: 'px-4 py-2 text-xs rounded-md gap-1.5',
    default: 'px-6 py-2.5 text-sm gap-2',
    lg: 'px-8 py-3.5 text-base rounded-xl gap-2.5'
  };
  
  const widthStyles = fullWidth ? 'w-full' : '';
  
  const combinedClasses = `${baseStyles} ${variantStyles[variant]} ${sizeStyles[size]} ${widthStyles} ${className}`;
  
  return (
    <button 
      type={type} 
      className={combinedClasses} 
      onClick={onClick}
      disabled={disabled}
    >
      {children}
    </button>
  );
};

export default Button;